<template>
  <v-col class="pa-0 mb-2">
    <v-card class="pt-0" flat>
      <v-list-item three-line>
        <v-list-item-avatar class="rounded-circle" rounded size="50"
          ><img
            src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=823977627,2892090821&fm=11&gp=0.jpg"
            alt=""
        /></v-list-item-avatar>
        <v-list-item-content class="pa-0">
          <v-card-title class="pl-0 pb-0 text-subtitle-2 text-truncate">
            {{ maincontent.username }}
          </v-card-title>
          <v-card-subtitle class="pl-0 text-caption text-truncate"
            >码仔@阿里嘎巴创始人·2小时前</v-card-subtitle
          >
        </v-list-item-content>
        <v-card-actions>
          <v-btn outlined rounded text> 关注 </v-btn>
        </v-card-actions>
      </v-list-item>
      <v-list-item class="pb-3">
        <v-row
          no-gutters
          class="ml-xl-16 ml-lg-16 ml-md-16 ml-sm-0 mr-xl-3 mr-xl-3"
        >
          <v-col class=" ">
            Small plates, salads & sandwiches - an intimate setting with 12
            indoor seats plus patio seating.
          </v-col>
        </v-row>
      </v-list-item>
      <v-list-item class="pb-3" v-if="maincontent.imgList.length != 0">
        <v-col class="pa-0">
          <PicPreview :imgList="maincontent.imgList" />
        </v-col>
      </v-list-item>
      <v-divider></v-divider>
      <v-row
        no-gutters
        justify="center"
        align="center"
        class="text-center"
        style="height: 34px"
      >
        <v-col
          class="d-flex align-center justify-center text-body-2 text--secondary"
        >
          <v-btn tile text block depressed plain bottom>
            <v-icon small> mdi-thumb-up-outline </v-icon>&nbsp; 5
          </v-btn>
        </v-col>
        <v-divider vertical inset></v-divider>
        <v-col
          class="d-flex align-center justify-center text-body-2 text--secondary"
          data-status="0"
          @click="getComment(maincontent.id)"
        >
          <v-btn tile text block depressed plain bottom>
            <v-icon small> mdi-comment-outline </v-icon>&nbsp; 10
          </v-btn>
        </v-col>
        <v-divider vertical inset></v-divider>
        <v-col
          class="d-flex align-center justify-center text-body-2 text--secondary"
          v-if="!this.$vuetify.breakpoint.smAndDown"
        >
          <v-btn tile text block depressed plain bottom>
            <v-icon small> mdi-share-outline</v-icon>&nbsp; 分享
          </v-btn>
        </v-col>
      </v-row>
      <v-divider></v-divider>

      <div :id="'comment-' + maincontent.id" v-if="status || is_open">
        <MainComment :id="maincontent.id" :need_more="need_more" />
      </div>
    </v-card>
  </v-col>
</template>

<script>
import PicPreview from '~/components/mistalk/PicPreview'
import MainComment from '~/components/mistalk/MainComment'

export default {
  components: { PicPreview, MainComment },
  props: {
    maincontent: Object,
    need_more: Number,
    is_open:Number
  },
  data: () => ({
    status: 0,
  }),
  methods: {
    getComment() {
      this.status = this.status ? 0 : 1
    },
  },
}
</script>

<style></style>
